<template>
	<view class="orderWrap">
		<scroll-view class="scroll_nav" :scroll-x="true">
			<view v-for="(tab, index) in tabBars" :key="index" class="order_name" @click="ontabtap(index)">
				<view class="uni-tab-item-title">
					{{ tab }}
					<view class="line" v-if=" index == tabIndex"></view>
				</view>
			</view>
		</scroll-view>
		<!-- 滑动切换 -->
		<swiper class="swiper" @change="changeSwiper" :current="tabIndex">
			<swiper-item class="swiper-item" >
				<scroll-view class="swiper_scroll" :scroll-y="true">
					<order-list @todetail="todetail" @tologistics="tologistics"></order-list>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" >
				<scroll-view class="swiper_scroll" :scroll-y="true">
					<order-list @todetail="todetail" @tologistics="tologistics"></order-list>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item" >
				<scroll-view class="swiper_scroll" :scroll-y="true">
					<order-list @todetail="todetail" @tologistics="tologistics"></order-list>
				</scroll-view>
			</swiper-item>
		</swiper>
		<!-- <view class="no_order">
			<image src="../../static/image/mine/discount/mine_order.png" mode=""></image>
			<view class="no_order_to">
				您当前还没有订单记录！<text>去购物看看</text>
			</view>
		</view> -->
	</view>
</template>

<script>
	import orderList from '@/components/order/orderlist.vue'
export default {
	components: {
		orderList
	},
	data() {
		return {
			tabIndex: 0,
			tabBars: ['全部', '待付款', '待发货', '待收货', '已完成']
		};
	},
	onLoad(options) {
		this.tabIndex = options.id
	},
	methods: {
		changeSwiper (e) {
			console.log(e);
			this.tabIndex = e.detail.current
		},
		ontabtap(e) {
			this.tabIndex = e;
			// let index = e.target.dataset.current || e.currentTarget.dataset.current;
			// this.switchTab(index);
		},
		todetail (e) {
			console.log(e)
			var content = JSON.stringify(e.content)
			uni.navigateTo({
				url: '/pageD/order/orderdetail?id='+e.key+'&content=' + content
			})
		},
		tologistics (key) {
			uni.navigateTo({
				url: '/pageD/logistics/logistics?id='+key
			})
		}
	}
};
</script>

<style lang="less" scoped>
.orderWrap{
	height: 100vh;
	overflow: hidden;
	padding-top: 80upx;
	padding-bottom: 20upx;
	box-sizing: border-box;
}
.swiper {
	display: flex;
	width: 100%;
	height: 100%;
	.swiper-item {
		flex: 1;
		flex-direction: row;
	}
}
.swiper_scroll {
	height: 100%;
}
.scroll_nav {
	position: fixed;
	left: 0;
	top: 0;
	z-index: 10;
	display: flex;

	width: 100%;
	height: 80upx;
	// position: fixed;
	// top: 0;
	// left: 0;
	// z-index: 1111;
	white-space: nowrap;
	flex-direction: row !important;
	background-color: #ffffff;
	.order_name {
		display: inline-block;
		font-size: 32upx;
		color: #333333;
		padding: 0 30upx;
		line-height: 80upx;
		box-sizing: border-box;
	
		.uni-tab-item-title {
			position: relative;
			z-index: 10;
		}
		.line {
			width: 120%;
			height: 16upx;
			border-radius: 8upx;
			background-color: #fdd8d5;
			position: absolute;
			bottom:20upx;
			left: 50%;
			transform: translate(-50%);
			z-index: -1;
		}
	}
}
.no_order {
	width: 100%;
	text-align: center;
	overflow: hidden;
	image {
		width: 227upx;
		height: 236upx;
		display: block;
		margin: auto;
		margin-top: 200upx;
		margin-bottom: 50upx;
	}
	.no_order_to {
		font-size: 28upx;
		color: #999999;
		text {
			color: #f73e2f;
			text-decoration: underline;
		}
	}
}
</style>
<style>
page {
	background-color: #f8f8f8;
	min-height: 100vh;
}
</style>
